<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #bg {
            width: 455px;
            height: 792px;
            position: absolute;
            overflow: hidden;
            /* top: 0;
            right: 0;
            left: 0;
            bottom: 0; */
            /* margin: auto; */
            /* background-color: rgb(69, 237, 243); */
            padding-left: 0px;
        }
        
        ul {
            /* background-color: rgb(139, 53, 53); */
        }
        
        .s {
            width: 10px;
            height: 10px;
            float: left;
            list-style: none;
            border: 0.1px solid #757575;
        }
        /* #chang {
            height: 10px;
            position: absolute;
            top: 0;
            left: 0;
        } */
        
        .ones {
            width: 10px;
            height: 10px;
            float: left;
            list-style: none;
            border: 0.1px solid #757575;
            background-color: rgb(54, 114, 255);
            /* color: #ff4c2c; */
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="bag">
        <ul id="bg">
            <!-- <ul id="chang"></ul> -->
        </ul>
    </div>

</body>

</html>
<script>
    // 随机数
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    };
    var liArr = [];
    var s = [];
    var ul = document.querySelector("#bg");
    var chang = document.querySelector("#chang");
    var bg = document.querySelector("#bg");

    for (var i = 0; i < 2508; i++) {
        var li = document.createElement("li");
        liArr.push(li);
        li.className = "s";
        ul.appendChild(li);
    }
    var w = liArr[0].offsetWidth;
    var oneBlck;
    var index;
    // 创建蛇
    function addS() {
        oneBlck = document.createElement("div");
        bg.appendChild(oneBlck);
        oneBlck.className = "ones";
        s.push(oneBlck);
    }
    addS();

    // 随机食物

    function food() {
        index = random(0, liArr.length - 1);
        liArr[index].style.backgroundColor = "#ff4c2c";
        for (var i = 0; i < liArr.length; i++) {
            if (liArr[index] != liArr[i]) {
                liArr[i].style.backgroundColor = "transparent";
            }
        }
    }

    food();
    // 吃食物

    function eat() {
        // console.log(oneBlck.offsetTop, oneBlck.style.top);
        if (jiance(s[0], liArr[index])) {
            console.log("hhh");
            addS();
            food();
            houyi();
        }
    }
    eat();
    // 把添加的蛇给到蛇后面
    function houyi() {
        for (var i = s.length - 1; i > 0; i--) {
            console.log(s);
            s[i].style.top = s[i - 1].offsetTop + "px";
            s[i].style.left = s[i - 1].offsetLeft + "px";
            // console.log(s[i].style.left);
        }
    }
    // 碰撞检测
    function jiance(one, tow) {
        var minleft = tow.offsetLeft - one.offsetWidth;
        var maxleft = tow.offsetLeft + tow.offsetWidth;
        var mintop = tow.offsetTop - one.offsetHeight;
        var maxtop = tow.offsetTop + tow.offsetHeight;
        if (one.offsetTop < maxtop && one.offsetTop > mintop && one.offsetLeft < maxleft && one.offsetLeft > minleft) {
            return true;
        } else {
            return false;
        }

    }
    // 控制蛇
    window.onkeydown = function() {
        var top1 = s[0].offsetTop;
        var left = s[0].offsetLeft;
        houyi();
        eat();
        console.log(w);
        if (left <= 0) {
            s[0].style.left = "0px";
            // 游戏结束
        }

        if (event.keyCode == 37) {
            s[0].style.left = left - w + "px";
            if (left <= 0) {
                s[0].style.left = 0 + "px";

                // 游戏结束
            }

        }
        if (event.keyCode == 38) {
            s[0].style.top = top1 - w + "px";
            // 判断界限
            if (top1 <= 0) {
                s[0].style.top = 0 + "px";
                console.log("wei0")
                    // 游戏结束
            }
        }
        if (event.keyCode == 39) {
            s[0].style.left = left + w + "px";
            if (left >= bg.offsetWidth - w) {
                s[0].style.left = bg.offsetWidth - w + "px";

                // 游戏结束
            }
        }
        if (event.keyCode == 40) {
            s[0].style.top = top1 + w + "px";
            if (top1 >= bg.offsetHeight - w) {
                s[0].style.top = bg.offsetHeight - w + "px";
                // 游戏结束
            }
        }
        eat();
    }
</script>